<template>
  <a-form :form="form">
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接口服务名称">
      <a-input placeholder="请输入接口服务名称" v-decorator="['apiName', validatorRules.apiName]" :disabled="disableSubmit" />
    </a-form-item>
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属部门">
      <a-tree-select style="width:100%" :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
        v-decorator="['sysOrgCode', validatorRules.sysOrgCode]" :disabled="disableSubmit" :treeData="treeData"
        v-model="model.parentId" placeholder="无">
      </a-tree-select>
    </a-form-item>
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人">
      <a-input placeholder="请输入负责人" v-decorator="['picPerson', validatorRules.picPerson]" :disabled="disableSubmit" />
    </a-form-item>
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人联系方式">
      <a-input placeholder="请输入负责人联系方式" v-decorator="['picPhone', validatorRules.picPhone]" :disabled="disableSubmit" />
    </a-form-item>
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属业务系统">
      <a-input placeholder="请输入所属业务系统" v-decorator="['clientName', validatorRules.clientName]"
        :disabled="disableSubmit" />
    </a-form-item>
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据表名称">
      <a-input placeholder="请输入数据表名称" v-decorator="['tableName', validatorRules.tableName]" :disabled="disableSubmit" />
    </a-form-item>
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据同步频率">
      <j-dict-select-tag :trigger-change="true" v-decorator="['dataFrequency', validatorRules.dataFrequency]"
        placeholder="请选择数据更新频率" dict-code="data_frequency" :disabled="disableSubmit" />
    </a-form-item>
    <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人联系方式">
      <a-input placeholder="负责人联系方式" v-decorator="['name', validatorRules.name]" :disabled="disableSubmit" />
    </a-form-item> -->
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接口描述">
      <a-textarea placeholder="请输入接口描述" v-decorator="['apiDescription', {}]" :disabled="disableSubmit" :rows="4" />
    </a-form-item>
  </a-form>
</template>

<script>
import pick from 'lodash.pick'
import { queryDepartTreeList } from '@/api/api'
import { getAction } from '@/api/manage'
export default {
  name: 'InterfaceBaseForm',
  components: {},
  props: {
    disableSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeData: [],
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        apiName: { rules: [{ required: true, message: '请输入接口服务名称!' }] },
        sysOrgCode: { rules: [{ required: true, message: '请选择所属部门!' }] },
        picPerson: { rules: [{ required: true, message: '负责人联系方式!' }] },
        picPhone: { rules: [{ required: true, message: '负责人联系方式!' }] },
        tableName: {
          rules: [{ required: true, message: '请输入数据表名称!' }, {
            validator: this.validateTableName
          }]
        },
        dataFrequency: {
          rules: [{
            required: true, message: '请选择数据更新频率!'
          }]
        }
      },
      url: {
        add: '/sys/dataSource/add',
        edit: '/sys/dataSource/edit',
        checkOnlyTable: '/dataSource/scSituationTable/checkOnlyTable'
      }
    }
  },
  created() {
    this.loadTree()
  },
  methods: {
    validateTableName(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        const part1 = new RegExp('^[a-zA-Z].*')
        const part2 = new RegExp('^[a-zA-Z]{1}_.*')
        const part3 = new RegExp('^[0-9].*')
        const part4 = new RegExp('[\u4E00-\u9FA5]')
        const part5 = new RegExp('^[0-9]*$')
        const part6 = new RegExp('^[a-zA-Z][a-zA-Z0-9_]*$')
        if (value.length > 30) {
          callback('长度不能超过30')
        } else if (!part1.test(value)) {
          callback('必须以字母开头')
        } else if (part2.test(value)) {
          callback('不能以单个字母加下划线开头')
        } else if (part3.test(value)) {
          callback('不能以数字开头')
        } else if (part4.test(value)) {
          callback('不能包含汉字')
        } else if (part5.test(value)) {
          callback('不能全部是数字')
        } else if (!part6.test(value)) {
          callback('不能包含特殊符号')
        } else {
          const params = {
            id: '',
            tbname: value
          }
          getAction(this.url.checkOnlyTable, params).then(res => {
            if (res.success && res.result === -1) {
              callback('表名已存在')
            } else {
              callback()
            }
          }).catch(() => {
            callback()
          })
        }
      }
    },
    loadTree() {
      var that = this
      that.treeData = []
      queryDepartTreeList().then((res) => {
        if (res.success) {
          // 部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            const temp = res.result[i]
            that.treeData.push(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
      })
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'id', 'apiName', 'sysOrgCode', 'picPerson', 'picPhone', 'clientName', 'apiDescription', 'tableName', 'dataFrequency'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    getParams() {
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.atn-testbtn {
  color: #2F77F2 !important;
  background: #FFFFFF !important;
  box-shadow: 0px 1px 3px 0px rgba(4, 0, 0, 0.08) !important;
  border: 1px solid #2F77F2 !important;
  border-radius: 2px !important;
  padding: 0 10px !important;
  height: 34px !important;
  margin: 0 8px 8px 0;
}
</style>
